<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>二级下拉菜单</title>
</head>
<style>
  .inner{
    /* 隐藏元素 */
    display: none;
  }
  /* 光标悬浮 */
  .outer span:hover+.inner{
      background-color: red;
      /* 显示元素 */
      display: block;
  }
</style>
<body>
  <!-- 一级菜单 -->
  <ul class="outer">
    <li>
      <span>第一阶段</span>
      <!-- 二级菜单 -->
      <ul class="inner">
        <li>html</li>
        <li>css</li>
      </ul>
    </li>
  </ul>
</body>
</html>